<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="sel">
        <option value="">省份</option>
    </select>
    <select name="" id="sel2">
        <option value="">市区</option>
    </select>
    <select name="" id="sel3">
        <option value="">城市</option>
    </select>
    <script>
        let name = '';
        let sel = document.querySelector('#sel');
        let sel2 = document.querySelector('#sel2');
        let sel3 = document.querySelector('#sel3');
        fetch('./city.json')
        .then(function(res){
            return res.json()
        }).then(function(res){
            for(let k in res){
               let option = document.createElement('option');
               option.value=k;
               option.innerHTML = k;
               sel.appendChild(option);
            }
            sel.addEventListener('click',function(event){
                sel2.innerHTML = '';
                sel3.innerHTML="";
                for(let k in res[event.target.value]){
                    let option = document.createElement('option');
                    option.value=k;
                    option.innerHTML = k;
                    sel2.appendChild(option);
                }           
                name = event.target.value;
        })
            sel2.addEventListener('click',function(event){
                    sel3.innerHTML = '';
                    let arr = res[name][event.target.value];
                    arr.forEach(function(item,index){
                        let option = document.createElement('option');
                        option.value=item;
                        option.innerHTML = item;
                        sel3.appendChild(option);
                    })
                })
    })
        
       
    
    </script>
    
</body>
</html>